<template>
  <div class="main">
    <div class="outDiv">
      <go-back aa="../user" :white="true" topTitle="关注院校" :hasTitle="true"></go-back>
      <div>
        <scroller ref="scrollerBottom" style="top: 0.88rem;" :on-refresh="refresh" :on-infinite="infinite" class="my-scroller">
          <svg class="spinner" style="stroke:@mainColor;" slot="refresh-spinner" viewBox="0 0 64 64">
            <g stroke-width="7" stroke-linecap="round">
              <line x1="10" x2="10" y1="27.3836" y2="36.4931">
                <animate attributeName="y1" dur="750ms" values="16;18;28;18;16;16" repeatCount="indefinite" />
                <animate attributeName="y2" dur="750ms" values="48;46;36;44;48;48" repeatCount="indefinite" />
                <animate attributeName="stroke-opacity" dur="750ms" values="1;.4;.5;.8;1;1" repeatCount="indefinite" />
              </line>
              <line x1="24" x2="24" y1="18.6164" y2="45.3836">
                <animate attributeName="y1" dur="750ms" values="16;16;18;28;18;16" repeatCount="indefinite" />
                <animate attributeName="y2" dur="750ms" values="48;48;46;36;44;48" repeatCount="indefinite" />
                <animate attributeName="stroke-opacity" dur="750ms" values="1;1;.4;.5;.8;1" repeatCount="indefinite" />
              </line>
              <line x1="38" x2="38" y1="16.1233" y2="47.8767">
                <animate attributeName="y1" dur="750ms" values="18;16;16;18;28;18" repeatCount="indefinite" />
                <animate attributeName="y2" dur="750ms" values="44;48;48;46;36;44" repeatCount="indefinite" />
                <animate attributeName="stroke-opacity" dur="750ms" values=".8;1;1;.4;.5;.8" repeatCount="indefinite" />
              </line>
              <line x1="52" x2="52" y1="16" y2="48">
                <animate attributeName="y1" dur="750ms" values="28;18;16;16;18;28" repeatCount="indefinite" />
                <animate attributeName="y2" dur="750ms" values="36;44;48;48;46;36" repeatCount="indefinite" />
                <animate attributeName="stroke-opacity" dur="750ms" values=".5;.8;1;1;.4;.5" repeatCount="indefinite" />
              </line>
            </g>
          </svg>
          <div class="schoolsBox">
            <ul class="schoolList">
              <li class="schoolItem" v-for="(item, index) of schoolsList" :key="index" @click="jumpToUni(item.academyCode)">
                <div class="topBlock">
                  <div class="titleImage">
                    <img :src="item.icon" alt />
                  </div>
                  <div class="titleName">
                    <span>{{ item.academyName }}</span>
                  </div>
                  <div :class="['btn', item.followStatus == 1 ? 'noAttentionBtn' : 'attentionBtn']" @click.stop="getAttention(item)">{{ item.followStatus == 1 ? '+ 关注' : '已关注' }}</div>
                </div>
                <div class="describe">{{ item.feature }}</div>
              </li>
            </ul>
            <div v-show="showBlank">
              <div class="noDataImage">
                <img src="~@/static/nothing/empty_attention.png" alt />
                <div class="describe">您还没有关注任何信息</div>
              </div>
            </div>
            <div style="width: 100%; height: 0.5rem;"></div>
          </div>
        </scroller>
      </div>
      <!-- <div v-else>
        <div class="noDataImage">
          <img src="~/static/nothing/empty_attention.png" alt="">
          <div class="describe">您还没有关注任何信息</div>
        </div>
      </div>-->
    </div>
  </div>
</template>

<script>
import goBack from '~/components/goBack'
import { followList, followUser } from '~/api/identity'
import ls from 'store2'
export default {
  components: {
    goBack,
  },
  data() {
    return {
      showBlank: false,
      pagination: {
        pageNo: 1,
        pageSize: 10,
      },
      listData: [],
      schoolsList: [],
      onFetching: true,
      noData: true,
      currentPage: 1,
    }
  },
  mounted() {
    // ls.remove("applsData");
    this.getAttentionSchools()
    this.$visit('FollowAcademy')
  },
  methods: {
    getAttentionSchools() {
      this.$loading('open')
      let obj = {
        pageNo: 1,
        pageSize: 10,
      }
      followList(obj)
        .then((res) => {
          if (res.code == 0) {
            this.schoolsList = res.data.list
            this.totalPage = res.data.pages
            if (this.schoolsList.length === 0) {
              this.showBlank = true
            }
          }

          this.$hideLoading()
        })
        .catch((error) => {
          this.$hideLoading()
        })
    },
    gotos(datas, index) {
      this.$store.commit('changeFollowIndex', index)

      this.goto('../yxk/academyDetail?academyCode=' + datas.academyCode + '&gobackwx=true')
    },

    refresh(done) {
      setTimeout(() => {
        this.pagination.pageNo = 1
        this.getAttentionSchools()
        done()
      }, 2000)
    },
    infinite(done) {
      if (this.currentPage < this.totalPage) {
        this.currentPage = this.currentPage + 1
        followList({
          pageNo: this.currentPage,
          pageSize: 10,
        }).then((res) => {
          if (res.code == '0') {
            let newArr = res.data.professorList
            this.schoolsList = this.schoolsList.concat(newArr)
            this.totalPage = res.data.pages
            done()
          }
        })
      } else {
        done(true)
        return
      }
    },

    goto(routerName) {
      this.$router.push({
        path: routerName,
      })
    },

    jumpToUni(code) {
      this.goto('../yxk/academyDetail?academyCode=' + code + '&gobackwx=true')
    },

    // 关注与取消关注
    getAttention(item) {
      this.$loading('open')
      let statusAction = 0 // 1:关注   0:取消关注
      if (item.followStatus == 0) {
        item.followStatus = 1 // 未关注
        statusAction = 0
      } else {
        item.followStatus = 0 // 已关注
        statusAction = 1
      }
      followUser({
        action: statusAction,
        fromUserId: ls.get('yxkData').userId,
        academyCode: item.academyCode,
      })
        .then(() => {
          this.$hideLoading()
        })
        .catch((error) => {
          this.$vux.toast.text('网络故障，请稍后重试~')
          this.$hideLoading()
        })
    },
  },
}
</script>

<style lang="less" scoped>
.outDiv {
  width: 100%;
  background: #fff;
  height: 100vh;

  .schoolsBox {
    padding: 0.2rem 0.16rem 0;

    .schoolList {
      padding-left: 0;
      list-style: none;

      .schoolItem {
        background: #fff;
        width: 100%;
        padding: 0.32rem;
        margin-bottom: 0.2rem;

        .topBlock {
          display: flex;
          justify-content: space-between;
          align-items: center;

          .titleImage {
            img {
              width: 0.6rem;
              height: 0.6rem;
              display: block;
              background: url('~/static/iconheader.png') no-repeat;
              background-size: 100% 100%;
              border-radius: 50%;
            }
          }

          .titleName {
            flex: 1;
            span {
              font-size: 0.34rem;
              font-weight: bold;
              color: #222;
              padding-left: 0.2rem;
              box-sizing: border-box;
            }
          }

          .btn {
            width: 1.26rem;
            height: 0.58rem;
            line-height: 0.58rem;
            border-radius: 0.29rem;
            font-size: 0.26rem;
            text-align: center;
            // margin-top: 0.34rem;
            box-sizing: border-box;
          }

          .attentionBtn {
            background: #f7f7fa;
            border: 1px solid transparent;
            color: #c7c7c7;
          }

          .noAttentionBtn {
            color: @mainColor;
            border: 1px solid @mainColor;
            background: #fff;
          }
        }

        .describe {
          color: #999;
          font-size: 0.26rem;
          line-height: 0.37rem;
          margin-top: 0.24rem;
        }
      }
    }
  }

  .noDataImage {
    text-align: center;
    padding-top: 2.4rem;
    img {
      width: 2.4rem;
      height: 2.4rem;
      margin-bottom: 0.24rem;
    }
    .describe {
      color: #999;
      font-size: 0.28rem;
      line-height: 0.4rem;
    }
  }
}
</style>
